<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Michael Lewis  Sandbox</title>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://helpmelearntheweb.com/wp-content/themes/helpmelearntheweb/style.css" type="text/css" media="screen" />

</head>
<body>

<script>
    $(function(){
        
        var changeDelay = 0;
        var accelerateTime = 100;  // Checks if changeDelay (actual time in between mouse wheel events) is less than delayTime.
        var decelerateTime = 100;  // if changeDelay is greater than this time, acceleration is decreased
        var multiplier = 1;  // default value for deltaChange multiplier
        var maxmultiplier = 10;  // configure the maximum "acceleration"
        var previousTimestamp = 0;
        var newDelta = 0;
        
        
        initHandlers();
        $("#htmlText").keyup(htmlHandler);
        $("#cssText").keyup(cssHandler);
        $("#jsText").keyup(javascriptHandler);
	javascriptHandler();
        $("#testSlider").slider({
           slide: function(event, ui) {
               $("#sliderLabel").html($("#testSlider").slider("value"));
           }
        });
        $("#sliderCont").mousewheel(function(event, delta) {
            event.stopImmediatePropagation();
            event.preventDefault();
            changeDelay = event.timeStamp - previousTimestamp;
            if (changeDelay < accelerateTime){
                if (multiplier <= maxmultiplier){
                    multiplier = multiplier + 1;
                }
                newDelta = delta * multiplier;                
            }
            if (changeDelay > decelerateTime){
                multiplier = 1;
                newDelta = delta;
            }
            previousTimestamp = event.timeStamp;
            $("#testSlider").slider("value", $("#testSlider").slider("value") + newDelta);
            $("#sliderLabel").html($("#testSlider").slider("value"));
        });
    });
    function initDelayVars(){
        
    }
    function deltaChange(delta){
        var timer = $.timer(function(){}, 100, false)
        if (changeDelay < 300){
            if (multiplier <= maxmultiplier){
                multiplier = multiplier + 1;
            } 
            newDelta = delta * multiplier;
        }
        return newDelta;
    }
    // using bind
    //$('#my_elem').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    //    console.log(delta, deltaX, deltaY);
    //});

    // using the event helper
    
    function initHandlers(){
        javascriptHandler();
        cssHandler();
        htmlHandler();
    }
    function javascriptHandler(){
        eval($("#jsText").val());
    }
    function cssHandler(){
        $("#sandboxStyle").html($("#cssText").val());
    }
    function htmlHandler(){
        $("#sandboxOutput").html($("#htmlText").val());
    }
</script>
<script id="sandboxScript">

</script>
<style id="sandboxStyle">
    
</style>

<div id="mainwrap">
<div id="contentwrap">
        <div class="post" id="post-7">

    <!-- START Sandbox Code -->
    <h2>Enter code, and watch it appear in the live preview below!</h2>
    <p>HTML<br />
    <textarea class="sandboxTextInput" id="htmlText">This is some text!! &lt;h1 id='myheader' &gt;This is a header!&lt;/h1&gt;</textarea></p>
    <p>CSS<br />
    <textarea class="sandboxTextInput" id="cssText">#myheader { color: red; }</textarea></p>
    <p>JavaScript (JQuery should work!)<br />
    <textarea class="sandboxTextInput" id="jsText">$('#myheader').click(function(){
$('#myheader').css('border','3px solid blue');
});</textarea></p>
    
    <!-- END Sandbox Code -->
    </div>
    <div class="post-shadow"></div>
    
    <div class="post">
    <h2 class="title"><a href="#" rel="bookmark" title="Sandbox Live Output">Live Preview</a></h2>
        <div class="entry" id="sandboxOutput">
            
        </div>
    </div>

    
    </div>

</div><!-- end mainwrap -->
<div class="clearfix"></div>

</body>
</html>